<template>
    <div class="message animated fadeIn">
        <div
            class="box"
        >   
            <div class="item" v-for='item in messageList' :key='item'>
                <div class='img_box'><img :src="item.headImg" alt=""></div>
                <div class="item_box">
                    <span style='font-weight:700;'>{{item.name}} </span>
                    <span>{{item.body}}</span>
                    <div class="item_bottom">
                        <span style="margin-right:20rpx;" v-if="(item.name!='Link')">{{item.creat_time}}</span>
                        <span style="margin-right:20rpx;" v-if="(item.name=='Link')">置顶评论</span>
                        <span v-if='item.love'>{{item.love}}次赞</span>
                        <span v-if='!item.love'>0次赞</span>
                    </div>
                </div>
                <i class="iconfont" style="font-size:11px;margin-right:11px;" :class='item.isActive?active:noActive' @tap='toggleClass(index,item.id)'></i>
            </div>
        </div>
        <div class="bottom"> 
            <img :src="userInfo.avatarUrl" alt="">
            <input type="text" placeholder="添加留言..." v-model='commitBody'>
            <span @tap='addMsg()'>发布</span>
        </div>      
    </div>
</template>

<script>
import HForm from 'components/form'
import HFormlist from 'components/formlist'
import tools from 'common/js/h_tools'
import { parse } from 'path';
export default {
  name: 'Message',
  components: {
    HForm,
    HFormlist
  },
  data () {
    return {
      isOpen: false,
      desc: '',
      messageList: [],
      openId: '',
      userInfo: '',
      isForm: false,
      isVideo: false,
      isFormlist: false,
      formList: [],
      commitBody:'',
      activeIndex:[],
      active:'icon-aixin active zan',
      noActive:"icon-aixinD",
    }
  },
  onShow () {
    // const that = this
    // that.isVideo = false
    // that.isForm = false
    // that.isFormlist = false
    // that.getMessageList() 获取历史评论列表
  },
  created(){
       this.getUserInfo()
       this.getMsg()
  },
  methods: {
    getUserInfo(){
        var that = this
        wx.getUserInfo({
          success: function (res) {
            that.userInfo = res.userInfo
            console.log('用户信息',that.userInfo)
            // that.blessing()
            // // that.getOpenId()
          }
        })
    },
    async getMsg(){
        wx.showLoading({
            title: '加载中...',
            mask:true   
        })
        var that = this
        let res = await wx.cloud.callFunction({name: 'getMsg'})
        let messageList = JSON.parse(res.result).data
        messageList.forEach(item=>{
            var dateStr = new Date(item.creat_time).getTime()
            item.love = parseInt(item.love)
            console.log(dateStr)
            item.creat_time = this.friendlyDate(dateStr) 
        })
        this.messageList = messageList
        wx.hideLoading()
    },
    async addMsg(){
        if(this.commitBody!=''){
            let res = await wx.cloud.callFunction({name: 'addMsg',data: {commitName:this.userInfo.nickName,avatar:this.userInfo.avatarUrl,commitBody:this.commitBody}})
            let ret = JSON.parse(res.result)
            this.commitBody = ''
            wx.showToast({
                title: '留言成功!',
                icon: 'success',
                duration: 1000,
                mask: true
            })
            this.getMsg()
        }else{
            wx.showToast({
                title: '不能发送空留言哦~小坏蛋',
                icon: 'none',
                duration: 1000,
                mask: true
            })
        }
    },
    friendlyDate(datsStr) {
        let dateObj = typeof datsStr === 'object' ? datsStr : new Date(datsStr)
        let time = dateObj.getTime()
        let now = Date.now()
        let space = now - time
        let str = ''
    
        switch (true) {
        case space < 60000:
            str = '刚刚'
            break
        case space < 1000*3600:
            str = Math.floor(space/60000) + '分钟前'
            break
        case space < 1000*3600*24:
            str = Math.floor(space/(1000*3600)) + '小时前'
            break
        default:
            str = Math.floor(space/(1000*3600*24)) + '天前'
        }
        return str
    },
    toggleClass (index,blogId) {
        if(this.activeIndex.indexOf(index)>-1){
            this.activeIndex.splice(this.activeIndex.indexOf(index),1)
            this.messageList[index].isActive = false
        }else{
            this.activeIndex.push(index)
            this.messageList[index].isActive = true
            this.addFabulous(index,blogId)
        }
    },
    async addFabulous(index,blogId){
        var res = await wx.cloud.callFunction({name: 'addMsgF',data: {id:blogId}})
        console.log(JSON.parse(res.result))
        let ret = JSON.parse(res.result)
        this.messageList[index].love += 1
        // this.getList()
        if(!ret.success){
            wx.showToast({
                title: '点赞失败哦~',
                icon: 'none',
                duration: 1000,
                mask: true
            })
            this.messageList[index].love -= 1
        }
    }
  
  },
  onPullDownRefresh () {
    wx.stopPullDownRefresh();
    console.log('下拉')
  },
  // 上拉加载，拉到底部触发
  onReachBottom() {
    console.log('上啦')
    // 到这底部在这里需要做什么事情
    // this.loadMore();
  },
  onShareAppMessage: function (res) {
    return {
      path: '/pages/message/main',
      title:'俊和秋的请柬'
    }
  }
}
</script>

<style>
    .active{
        color:rgb(255, 66, 66)!important;
        /* transition:all .5s; */
    }
    .zan {
        animation: mymove .8s;
    }
    @keyframes mymove{
        0%{
            transform: scale(0.9);
        }
        10%{
            transform: scale(1);
        }
        20%{
            transform: scale(1.2);
        }
        30%{
            transform: scale(1.1);
        }
        40%{
            transform: scale(1);
        }
        60%{
            transform: scale(1.03);
        }
        80%{
            transform: scale(1.02);
        }
        100%{
            transform: scale(1);
        }
    }
</style>

<style scoped lang="stylus">
.message
    height 100%
    width 100%
    .box
        height 100%
        width 100%
        .place
            height 20rpx
        .place-end
            height 160rpx
        .item
            position relative
            display flex 
            align-items center 
            margin-top 60rpx 
            .iconfont
                position absolute
                top 35% 
                right 0 
            .img_box     
                margin 0 30rpx
                img
                    width 75rpx
                    height 75rpx
                    border-radius 50%
            .item_box
                font-size 26rpx 
                line-height 31rpx
                padding-right 75rpx 
            .item_bottom
                margin-top 8rpx
                color #a2a2a2 
    .bottom
        position fixed
        background white
        bottom 0
        left 0
        height 90rpx 
        display flex 
        align-items center
        border-top 1px solid #e2e2e2 
        width 100% 
        padding 2rpx 0 
        img
            width 75rpx
            height 75rpx
            border-radius 50%
            margin 0 30rpx
        input 
            font-size 30rpx
        span 
            margin-left 210rpx 
            font-size 30rpx 
            color #ffc131 
    .dialog
        position fixed
        bottom 0
        left 0
        z-index 99
        background #fff
        width 100%
        textarea
            height 200rpx
            line-height 42rpx
            font-size 30rpx
            color #333
            resize none
            outline none
            padding 30rpx
            width 690rpx
            background #f5f5f5
            &::-webkit-input-placeholder
                font-size 30rpx
                color #999
        .btn
            height 120rpx
            display flex
            justify-content center
            align-items center
            .left, .right
                height 80rpx
                line-height 80rpx
                font-size 28rpx
                flex 2
                color #fff
                background #ED695D
                margin 0 20rpx 0 30rpx
            .right
                flex 1
    .video-dialog
        position fixed
        right 10rpx
        top 200rpx
        width 100rpx
        height 100rpx
        box-shadow 0 0 10rpx rgba(0, 0, 0, 0.1)
        background #fff
        border-radius 16rpx
        image
            width 100%
            height 100%
    .form-dialog
        position fixed
        right 10rpx
        top 320rpx
        width 100rpx
        height 100rpx
        box-shadow 0 0 10rpx rgba(0, 0, 0, 0.1)
        background #fff
        border-radius 50rpx
        image
            width 100%
            height 100%
    .video, .form, .form-list
        position fixed
        top 0
        bottom 0
        left 0
        right 0
        background #fff
        z-index 99
    .form-list
        background rgba(0, 0, 0, 0.5)
</style>
